<template>
  <div class="flex-row flex-wrap">
    <div class="flex-row justify-center align-center pc-upload-container m_x2 m_y2"
         @click="visible=true"
         v-if="maxCounts>_urls.length"
         :style="sizeStyle">
      <i class="el-icon-plus font28 text-light"></i>
    </div>
    <div class="image-item-container m_x2 m_y2" :style="sizeStyle" v-for="(url,index) of _urls">
      <el-image class="image-item" :src="url" :preview-src-list="_urls"></el-image>
      <i class="el-icon-close" @click="onRemove(index)"></i>
    </div>
    <PictureManager :max="maxCounts-_urls.length" v-model:visible="visible" @onUsed="onUsed"
                    @onPictureRemove="onPictureRemove"></PictureManager>
  </div>
</template>

<script>
import PictureManager from './PictureManager'
import {deepClone, isArray} from '@/utils/helpers'

export default {
  name: 'PictureUpload',
  props: {
    value: {
      type: [Array, String],
      default() {
        return []
      }
    },
    // 仅当value 为数组时 max 有效
    max: {
      type: Number,
      default: Infinity
    },
    width: Number,
    height: Number,
    size: {
      type: Number,
      default: 100
    }
  },
  components: {
    PictureManager
  },
  data() {
    return {
      visible: false,
      urls: []
    }
  },

  watch: {
    urls(val) {
      if (this.valueIsSimple) { // 仅当单个时做额外处理
        const _val = val[0] || ''
        if (_val !== this.value) {
          this.$emit('input', _val)
          this.$emit('update:value', _val)
        }
        return
      }
      // 一下是多项处理
      const valL = val.length, valueL = this.value.length
      if (valL !== valueL) {
        this.$emit('update:value', val)
        return this.$emit('input', val)
      }
      let a = [], b = []
      if (valL > valueL) {
        a = deepClone(val)
        b = this.value
      } else {
        a = deepClone(this.value)
        b = val
      }
      if (a.filter(item => b.indexOf(item) === -1)) {
        this.$emit('update:value', val)
        return this.$emit('input', val)
      }
    }
  },
  computed: {
    _urls() {
      if (this.value) { // value == null 处理
        this.urls = this.valueIsSimple ? [this.value] : this.value
      }
      return this.urls
    },
    valueIsSimple() {
      return !isArray(this.value)
    },
    maxCounts() {
      if (this.valueIsSimple) {
        return 1
      }
      return this.max
    },
    sizeStyle() {
      let {width, height, size} = this
      width = width || size
      height = height || size
      return {
        width: width + 'px',
        height: height + 'px'
      }
    }
  },
  methods: {
    onUsed(urls) {
      this.urls.push(...urls)
    },
    onPictureRemove(urls) {
      this.urls = this.urls.filter(item => {
        return urls.indexOf(item) === -1
      })
      this.$emit('onPictureRemove', urls)
    },
    onRemove(index) {
      if (index >= 0) {
        const url = this.urls[index]
        if (url) {
          this.urls.splice(index, 1)
          this.$emit('onRemove', url)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.m_x2 {
  margin-left: 2px;
  margin-right: 2px;
}

.pc-upload-container {
  width: 100%;
  height: 100%;
  border: 1px dashed #d9d9d9;
  cursor: pointer;

  &:hover {
    border-color: #53A8FF;
  }
}

.image-item-container {
  position: relative;

  .image-item {
    position: absolute;
  }

  .el-icon-close {
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 20px;
    text-align: center;
    display: inline-block;
    color: #ffffff;
    background-color: #FF4848;
  }
}
</style>
